<template>
	<view class="container">
		<view class="content">
			<view class="profit-box">
				<view class="profit-title">
					<view>平台战绩</view>
					<image class="run-icon" src="../../static/images/run-icon-new.gif" mode=""></image>
				</view>
				<view class="achievement">534408794</view>
				<view class="grey-blue-F fz17 transformOrigin5050">今日用户佣金收益</view>
				<view class="progress-wrapper">
					<progress :percent="progress" stroke-width="5" activeColor="#0DD4BB" backgroundColor="#708FFB" border-radius="3rpx" active />
					<view class="progress-info">
						<view class="start">starting point</view>
						<view class="end">End</view>
					</view>
					<view class="progress-info progress-slider">
						<view class="middle" :style="{'left': `${progress}%`}">{{progress}}%</view>
					</view>
				</view>
			</view>
			<view class="chart-area">
				<text class="chart-title">年化收益突破20亿</text>
				<text class="illustration">20.00000000</text>
				<image src="../../static/images/invite-chart-bg.png" mode=""></image>
			</view>
			<view class="code-area">
				<view class="code-box">
					<image :src="codeImg" mode=""></image>
				</view>
				<view class="code-explain">
					<view class="">
						<view class="identify"><text></text>成为代理识别二维码</view>
						<view class="explain-en">Become a proxy ID QR code</view>
					</view>
					<view class="">
						<view class="save"><text></text>点击保存二维码</view>
						<view class="explain-en">Click to save the QR code</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <tabbar-diy :isIndex="2"></tabbar-diy> -->
	</view>
</template>

<script>
	let _self;
	import tabbarDiy from '../../components/tabbar-diy.vue'
	export default {
		data() {
			return {
				isIndex: 2,
				achievementStr: '000000000',
				codeImg: '../../static/images/invite-code-default.png',
				progress: 68,
			}
		},
		components:{
			tabbarDiy
		},
		onLoad() {
			_self = this;
			console.log(document)
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container{
		color: #fff;
		min-height: 100vh;
		box-sizing: border-box;
		padding-bottom: 8rpx;
	}
	.content{
		background-color: #202A33;
		min-height: calc(100vh - 8rpx);
	}
	.profit-box{
		width: 683rpx;
		height: 294rpx;
		margin: 0 auto 42rpx;
		border-radius: 14rpx;
		background-color: #071724;
		text-align: center;
		
		.profit-title{
			width: 100%;
			height: 90rpx;
			padding: 0 48rpx 0 28rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.run-icon{
				width: 39rpx;
				height: 39rpx;
				width: 100rpx;
				height: 100rpx;
			}
		}
		.achievement{
			color: #0DD4BB;
			font-size: 50rpx;
			font-family: 'fzyt_GBK';
			font-weight: bold;
			letter-spacing: 2rpx;
		}
		.progress-wrapper{
			width: 594rpx;
			margin: 30rpx auto;
			
			.progress-info{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 14rpx;
			}
			.start, .middle, .end{
				font-size: 24rpx;
				transform: scale(0.88);
				font-family: 'fzyt_GBK';
			}
			.start{
				color: #708FFB;
				transform-origin: 0% 0%;
			}
			.end{
				color: #0DD4BB;
				transform-origin: 100% 0%;
			}
			.progress-slider{
				position: relative;
				transform: translateY(-150%);
			}
			.middle{
				position: relative;
				transform: scale(0.88) translateX(-50%);
				transform-origin: 50% 0%;
				left: 0%;
				z-index: 3;
			}
			.middle::after{
				content: '';
				display: inline-block;
				width: 0rpx;
				height: 0rpx;
				position: absolute;
				top: -10rpx;
				left: calc(50% - 4rpx);
				border-top: 5rpx solid rgba($color: #000000, $alpha: 0);
				border-left: 4rpx solid rgba($color: #000000, $alpha: 0);
				border-right: 4rpx solid rgba($color: #000000, $alpha: 0);
				border-bottom: 5rpx solid #fff;
			}
		}
	}
	
	.chart-area{
		width: 686rpx;
		height: 350rpx;
		margin: 0 auto 42rpx;
		border-radius: 14rpx;
		background-color: #111F2A;
		position: relative;
		
		.chart-title{
			position: absolute;
			left: 31rpx;
			top: 50rpx;
			font-size: 26rpx;
		}
		
		.illustration{
			position: absolute;
			left: 368rpx;
			top: 72rpx;
			font-size: 24rpx;
			transform: scale(0.72);
			transform-origin: 0% 0%;
		}
		
		image{
			width: 634rpx;
			height: 256rpx;
			margin: 63rpx 19rpx 31rpx 33rpx;
		}
	}
	
	.code-area{
		width: 686rpx;
		height: 321rpx;
		margin: 0 auto;
		border-radius: 28rpx;
		background-color: #151F2A;
		display: flex;
		align-items: center;

		.code-box{
			width: 206rpx;
			height: 206rpx;
			margin-left: 74rpx;
			
			image{
				width: 206rpx;
				height: 206rpx;
			}
		}
		.code-explain{
			height: 206rpx;
			margin-left: 65rpx;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			
			.explain-en{
				display: inline-block;
				color: #393B6A;
				transform: scale(0.72);
			}
			.identify>text, .save>text{
				display: inline-block;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.identify>text{
				background-color: #0DD4BB;
			}
			.save>text{
				background-color: #708FFB;
			}
		}
	}
	
</style>
